Jakiś czas temu założyłem sobie konto w twitter.com. Chcąc wzbogacić bloga o pewien dodatek oferowany przez wymieniony wyżej serwis(dot. aktualnie wykonywanych przeze mnie czynności), zmuszony byłem zainstalować go w postaci flasha na stronie. Niestety, nie przepadam za „flashowymi bajerami” i tym samym postanowiłem stworzyć coś nowego, co odpowiadałoby moim potrzebom 🙂 Z pomocą przyszło mi API twittera, php oraz JavaScript(prototype, script.aculo.us – pliki: scriptaculous.js, effects.js).

Twitter.com udostępnia obszerne API dzięki któremu, za pomocą skryptów zewnętrznych możemy kontrolować obsługę naszego konta w serwisie. W naszym przypadku(chcemy pobierać tylko statusy utworzone przez nas) odwoływać będziemy się do tego adresu: http://twitter.com/statuses/user_timeline/user.json – gdzie user jest zarejestrowaną nazwą użytkownika.

Stwórzmy bibliotekę – twitter.class.php – która odpowiedzialna będzie za pobieranie wyżej wymienionego pliku:

      class Twitter
      {
          function get_status($user_name)
          {
              $handle = fopen('http://twitter.com/statuses/user_timeline/'.$user_name.'.json', "r");
              while (!feof($handle)) {
                  $response .= fread($handle, 8192);
              }
              return $response;
          }
      }

Następnym krokiem, bedzie stworzenie pliku – twitter.php – do którego będziemy się odwoływać za pomocą AJAX’a. Plik ten będzie korzystał z wcześniej utworzonej klasy Twitter:

get_status($_GET['user_name']);
    echo $json;
?>

Po utworzeniu skryptów wykonywanych po stronie serwera, zajmijmy się stroną kliencką. Stwórzmy bibliotekę JavaScript – twitterLib.js odpowiedzialną za wywołania pliku twitter.php przy udziale AJAX’a(z drobną pomocą biblioteki prototype oraz script.aculo.us), oraz odpowiednie przetwarzanie i generowanie widoku:

var handlerFunc = function(t) {
    var jsonObj = eval(t.responseText);
    var area = document.getElementById(twitter_block_name);
    for(i = 0; i < jsonObj.length; i++) {
        var date = new Date(jsonObj[i].created_at);
        area.innerHTML +=  "
[ " + date.toLocaleString() + " ]
" + jsonObj[i].text + "
";
    }
}
window.onload = function() { new Ajax.Request('http://files.gruszka.info/blog/scripts/twitter/twitter.php', {parameters:'user_name=' + twitter_user_name, method:'get', onSuccess:handlerFunc}); }

Kolejnym krokiem będzie „połączenie wszystkiego w całość” poprzez stworzenie pliku index.html:

    
    
    
    
    


    

        
Co porabiam...
        

    

Gdzie twitter_user_name to nazwa użytkownika w serwisie twitter, a twitter_block_name to id elementu w jakim chcemy umieścić nasze statusy.

Dodajmy jeszcze wygląd – style.css:

#twitter {
    border: 1px solid #000;
    width: 250px;
}

#twitter_title {
    background-color: #388938;
    color: #FFFFFF;
    font-weight: bold;
    padding: 2px;
    text-align: center;
}

#twitter_block {
    padding: 10px;
}

#twitter_block span {
    font-size: 11px;
    color: gray;
}

Ufff…. skończyliśmy 🙂 Gotowy przykład działania można zobaczyć pod: http://snipeworld.com/files/blog/scripts/twitter/